<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的钱包</title>
    <link rel="icon" href="image/public/Logo.ico">
    <style>
        html {
            font-size: 50px;
        }

        @media screen and (min-width:375px) {
            html {
                font-size: 25px;
            }
        }

        @media screen and (min-width:390px) {
            html {
                font-size: 26px;
            }
        }

        @media screen and (min-width:414px) {
            html {
                font-size: 27.6px;
            }
        }

        @media screen and (min-width:820px) {
            html {
                font-size: 54.6px;
            }
        }

        .rem-ppt {
            background-image: url(./image/miltn/miltn1.png);
        }

        .rem_tup i {
            width: 0.7rem;
            height: 1.3rem;
            display: block;
            background-size: 100% 100%;
            margin: auto 0;
            position: absolute;
            left: 0.8rem;
            right: 0px;
            top: 0px;
            bottom: 0px;
        }

        h1 {
            font-family: 楷体;
            font-size: 0.8rem;
            margin: 0 auto;
            text-align: center;
            height: 3rem;
            background-size: 100% auto;
        }

        .font {
            font-size: 0.5rem;
            margin-left: 1rem;
        }

        .font samp {
            margin-left: 1rem;
        }

        /* 收益明细 */
        .withdraw {
            color: coral;
            margin-left: 13rem;
            display: flex;
            text-align: right;
            font-size: 0.7rem;
            transform: translateY(-0.8rem);
            text-decoration: none;
        }

        .money_xj {
            color: coral;
            font-size: 1.3rem;
            margin-left: 1rem;
            transform: translateY(-0.8rem);
        }

        .font-money-first {
            font-size: 0.8rem;
        }

        /* 积分余额 */

        .font-money-first {
            width: 4rem;
            margin-left: 1rem;
        }

        /* 累计兑换 */

        .font-money {
            width: 4rem;
            font-size: 0.8rem;
            margin-left: 10rem;
            transform: translateY(-1.5rem);
        }

        .now {
            font-size: 0.5rem;
        }

        .tx {
            font-size: 0.5rem;
        }

        .font-jijo {
            width: 100%;
            height: 0.5rem;
            background: lavender;
        }

        /* 历史积分 */

        .font-fira {
            font-size: 0.8rem;
            margin-top: 1rem;
            margin-left: 1rem;
        }

        /* 图片 */

        .font-rirc {
            width: 100%;
            height: 14rem;
        }

        .font-rire {
            width: 6rem;
            height: 4rem;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin-top: 17rem;
        }

        .font-rira {
            font-size: 0.5rem;
            transform: translateY(-4.5rem);
            margin-left: 7.3rem;
        }

        /* 立即提现 */
        .font-fird {
            width: 15rem;
            height: 2rem;
            background-color: #ccc;
            margin: 0 auto;
            text-align: center;
            color: #ffffff;
            line-height: 2rem;
        }

        .list {
            padding: 1.5rem .61rem 0;
            background: #Fff;
        }

        .list .invite,
        .list .extract {
            width: 3.2rem;
            float: left;
            font-size: .6rem;
            color: #4A4A4A;
            /* 兑换记录 */
            font-size: 0.8rem;
            margin-left: 1rem;
            transform: translateY(-0.8rem);
            text-align: center;
        }

        .list .active {
            color: #FF8000;
            /* 历史积分 */
            font-size: 0.8rem;
            margin-top: 0rem;
            margin-left: 0.5rem;
            padding-bottom: 0.3rem;
            border-bottom: 0.1rem solid #FF8000;
        }

        .list .invite {
            margin-right: 3.5rem;
        }

        .abc {
            width: 1rem;
            height: 1rem;

        }

        .bcd {
            width: 0.5rem;
            height: 0.7rem;
            margin-left: 1rem;
            transform: translateY(0.5rem);
        }

        .x1 {
            padding-bottom: 0.2rem;
        }
    </style>
    <script src="../jquery/jquery-3.6.0.js"></script>
</head>

<body>
    <div class="rem-tup">
        <div class="abc"><img class="bcd" src="./image/miltn/miltn1.png"></div>
        <div class="rem-ppt"></div>
        <h1>我的钱包</h1>
    </div>
    <div class="record">
        <div class="topImg">
            <div class="moneyInfo">
                <div class="font">现金(元)<span>满100元可提现</span>
                </div>
                <div class="withdraw">收益明细</div>
                <div class="money_xj">0.00</div>
                <div class="font-money-first">积分余额
                    <div class="now">0.00</div>
                </div>
                <div class="font-money">累计兑换
                    <div class="tx">0.00</div>
                </div>

            </div>
        </div>
        <div class="font-jijo"></div>
        <div class="list" id="listt">
            <div class="list_item invite active">
                <samp class="x1">历史积分</samp> <i class="line"></i>
            </div>
            <div class="list_item extract">
                <samp class="x2">兑换记录</samp> <i class="line"></i>
            </div>
            <div class="font-rirc"><img class="font-rire" src="./image/miltn/miltn2.png"></div>
            <div class="font-rira">暂无记录</div>
            <div class="font-fird">立即提现</div>
        </div>
    </div>
    <script>
        $("#listt .list_item").off("click").on("click", function () {
            $(this).addClass("active").siblings().removeClass("active");
        });
    </script>
</body>

</html>